<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    .color article:nth-child(1) {
        color: red;
    }

    .color article:nth-child(2) {
        color: #FF69B4;
    }

    .color article:nth-child(3) {
        color: rgb(186, 85, 211);
    }

    .color article:nth-child(4) {
        color: rgba(186, 85, 211, 0.5); /*透明度从0-1*/
    }
    /*文本线条  倾斜*/
    .shape article:nth-child(1) {
        font-style: italic;
    }
    /*bold: 字体加粗*/
    .shape article:nth-child(2) {
        font-weight: bold;
    }
    /*字体尺寸  30px: 像素*/
    /*0.5em: 父标签 font-size 值的一半*/
    /*0.5rem: 根标签 <html> 的 font-size 值的一半*/
    .shape article:nth-child(3) {
        font-size: 30px;
    }
    /*文本线条*/
    /*overline: 文本上划线*/
    /*line-though: 文本中划线，即删除线*/
    /*underline: 文本下划线*/
    .shape article:nth-child(4) {
        text-decoration: overline;
    }
    /*文本变形*/
    /*lowercase: 文本转全小写*/
    /*uppercase: 文本转全大写*/
    .shape article:nth-child(5) {
        text-transform: lowercase;
    }
    /*}         x   y   z*/
    /*文本阴影  2px -2px 2px red: 水平偏移，垂直偏移，模糊程度，阴影颜色*/
    .shape article:nth-child(6) {
        text-shadow: 2px -2px 2px red;
    }
    /*首行缩进	30px: 像素*/
    .shape article:nth-child(7) {
        text-indent: 20px;
    }
    /*水平位置
    left: 标签内的元素，水平位置居左，默认值*/
    /*center: 标签内的元素，水平位置居中*/
    /*right: 标签内的元素，水平位置居右*/
    .shape article:nth-child(8) {
        text-align: center;
    }
    /*字母间距*/
    .shape article:nth-child(9) {
        letter-spacing: 30px;
    }
    /*单词间距 手动给字母加上空格*/
    .shape article:nth-child(10) {
        word-spacing: 30px;
    }
    /*字母间距*/
    .shape article:nth-child(11) {
        line-height: 200px;
    }
</style>
</head>
<body>
<h3>文本颜色</h3>
<section class="color">
    <article>葡萄美酒夜光杯</article>
    <article>欲饮琵琶马上催</article>
    <article>醉卧沙场君莫笑</article>
    <article>古来征战几人回</article>
</section>


<h3>文本形状</h3>
<section class="shape">
    <article>葡萄美酒夜光杯（倾斜）</article>
    <article>欲饮琵琶马上催（加粗）</article>
    <article>醉卧沙场君莫笑（字号）</article>
    <article>古来征战几人回（下划线）</article>
    <article>HELLO WORLD（转小写）</article>
    <article>葡萄美酒夜光杯（阴影）</article>
    <article>欲饮琵琶马上催（缩进）</article>
    <article>醉卧沙场君莫笑（居中）</article>
    <article>古来征战几人回（字母间距）</article>
    <article>葡 萄 美 酒 夜 光 杯（单词间距）</article>
    <article>欲饮琵琶马上催（行高）</article>
</section>

</body>
</html>